// Hide from screenreaders and browsers
// Credit: HTML5 Boilerplate
.hidden {
  display: none !important;
}

// Toggling content
// -------------------------
.show {
  display: block !important;
}

.overflow-y {
  overflow-y: auto !important;
}

.overflow-x {
  overflow-x: auto !important;
}

// For Affix plugin
// -------------------------
.affix {
  position: fixed;
}


/*
 * Component: Box
 * --------------
 */
//.box {
//  position: relative;
//  @include border-radius($box-border-radius);
//  background: #ffffff;
//  border-top: 3px solid $box-default-border-top-color;
//  margin-bottom: 20px;
//  width: 100%;
//  box-shadow: $box-boxshadow;
//
//  // Box color variations
//  &.box-primary {
//    border-top-color: $primary;
//  }
//  &.box-info {
//    border-top-color: $info;
//  }
//  &.box-danger {
//    border-top-color: $danger;
//  }
//  &.box-warning {
//    border-top-color: $warning;
//  }
//  &.box-success {
//    border-top-color: $success;
//  }
//  &.box-default {
//    border-top-color: $default;
//  }
//
//  // collapsed mode
//  &.collapsed-box {
//    .box-body,
//    .box-footer {
//      display: none;
//    }
//  }
//
//  .nav-stacked {
//    > li {
//      border-bottom: 1px solid $box-border-color;
//      margin: 0;
//      &:last-of-type {
//        border-bottom: none;
//      }
//    }
//  }
//
//  // fixed height to 300px
//  &.height-control {
//    .box-body {
//      max-height: 300px;
//      overflow: auto;
//    }
//  }
//
//  .border-right {
//    border-right: 1px solid $box-border-color;
//  }
//  .border-left {
//    border-left: 1px solid $box-border-color;
//  }
//
//  //SOLID BOX
//  //---------
//  //use this class to get a colored header and borders
//
//  &.box-solid {
//    border-top: 0;
//    > .box-header {
//      .btn.btn-default {
//        background: transparent;
//      }
//      .btn,
//      a {
//        &:hover {
//          background: rgba(0, 0, 0, 0.1);
//        }
//      }
//    }
//
//    // Box color variations
//    &.box-default {
//      .box-solid-variant($default, #444);
//    }
//    &.box-primary {
//      .box-solid-variant($primary);
//    }
//    &.box-info {
//      .box-solid-variant($info);
//    }
//    &.box-danger {
//      .box-solid-variant($danger);
//    }
//    &.box-warning {
//      .box-solid-variant($warning);
//    }
//    &.box-success {
//      .box-solid-variant($success);
//    }
//
//    > .box-header > .box-tools .btn {
//      border: 0;
//      box-shadow: none;
//    }
//
//    // Fix font color for tiles
//    &[class*='bg'] {
//      > .box-header {
//        color: #fff;
//      }
//    }
//
//  }
//
//  //BOX GROUP
//  .box-group {
//    > .box {
//      margin-bottom: 5px;
//    }
//  }
//
//  // jQuery Knob in a box
//  .knob-label {
//    text-align: center;
//    color: #333;
//    font-weight: 100;
//    font-size: 12px;
//    margin-bottom: 0.3em;
//  }
//}
//
//.box,
//.overlay-wrapper {
//  // Box overlay for LOADING STATE effect
//  > .overlay,
//  > .loading-img {
//    position: absolute;
//    top: 0;
//    left: 0;
//    width: 100%;
//    height: 100%;
//  }
//
//  .overlay {
//    z-index: 50;
//    background: rgba(255, 255, 255, 0.7);
//    .border-radius($box-border-radius);
//    > .fa {
//      position: absolute;
//      top: 50%;
//      left: 50%;
//      margin-left: -15px;
//      margin-top: -15px;
//      color: #000;
//      font-size: 30px;
//    }
//  }
//
//  .overlay.dark {
//    background: rgba(0, 0, 0, 0.5);
//  }
//}
//
////Add clearfix to header, body and footer
//.box-header,
//.box-body,
//.box-footer {
//  .clearfix();
//}
//
////Box header
//.box-header {
//  color: #444;
//  display: block;
//  padding: $box-padding;
//  position: relative;
//
//  //Add bottom border
//  &.with-border {
//    border-bottom: 1px solid $box-border-color;
//    .collapsed-box & {
//      border-bottom: none;
//    }
//  }
//
//  //Icons and box title
//  > .fa,
//  > .glyphicon,
//  > .ion,
//  .box-title {
//    display: inline-block;
//    font-size: 18px;
//    margin: 0;
//    line-height: 1;
//  }
//  > .fa,
//  > .glyphicon,
//  > .ion {
//    margin-right: 5px;
//  }
//  > .box-tools {
//    position: absolute;
//    right: 10px;
//    top: 5px;
//    [data-toggle="tooltip"] {
//      position: relative;
//    }
//
//    &.pull-right {
//      .dropdown-menu {
//        right: 0;
//        left: auto;
//      }
//    }
//  }
//}
//
////Box Tools Buttons
//.btn-box-tool {
//  padding: 5px;
//  font-size: 12px;
//  background: transparent;
//  color: darken($box-default-border-top-color, 20%);
//  .open &,
//  &:hover {
//    color: darken($box-default-border-top-color, 40%);
//  }
//  &.btn:active {
//    box-shadow: none;
//  }
//}
//
////Box Body
//.box-body {
//  .border-radius(0; 0; $box-border-radius; $box-border-radius);
//  padding: $box-padding;
//  .no-header & {
//    .border-top-radius($box-border-radius);
//  }
//  // Tables within the box body
//  > .table {
//    margin-bottom: 0;
//  }
//
//  // Calendar within the box body
//  .fc {
//    margin-top: 5px;
//  }
//
//  .full-width-chart {
//    margin: -19px;
//  }
//  &.no-padding .full-width-chart {
//    margin: -9px;
//  }
//
//  .box-pane {
//    .border-radius(0; 0; $box-border-radius; 0);
//  }
//  .box-pane-right {
//    .border-radius(0; 0; 0; $box-border-radius);
//  }
//}
//
////Box footer
//.box-footer {
//  .border-radius(0; 0; $box-border-radius; $box-border-radius);
//  border-top: 1px solid $box-border-color;
//  padding: $box-padding;
//  background-color: $box-footer-bg;
//}
//
//.chart-legend {
//  &:extend(.list-unstyled);
//  margin: 10px 0;
//  > li {
//    $media (max-width: $screen-sm-max) {
//      float: left;
//      margin-right: 10px;
//    }
//  }
//}
//
////Comment Box
//.box-comments {
//  background: #f7f7f7;
//  .box-comment {
//    .clearfix();
//    padding: 8px 0;
//    border-bottom: 1px solid #eee;
//    &:last-of-type {
//      border-bottom: 0;
//    }
//    &:first-of-type {
//      padding-top: 0;
//    }
//    img {
//      &:extend(.img-sm);
//      float: left;
//    }
//  }
//  .comment-text {
//    margin-left: 40px;
//    color: #555;
//  }
//  .username {
//    color: #444;
//    display: block;
//    font-weight: 600;
//  }
//  .text-muted {
//    font-weight: 400;
//    font-size: 12px;
//  }
//}

//Widgets
//-----------

/* Widget: TODO LIST */

//.todo-list {
//  margin: 0;
//  padding: 0;
//  list-style: none;
//  overflow: auto;
//  // Todo list element
//  > li {
//    .border-radius(2px);
//    padding: 10px;
//    background: #f4f4f4;
//    margin-bottom: 2px;
//    border-left: 2px solid #e6e7e8;
//    color: #444;
//    &:last-of-type {
//      margin-bottom: 0;
//    }
//
//    > input[type='checkbox'] {
//      margin: 0 10px 0 5px;
//    }
//
//    .text {
//      display: inline-block;
//      margin-left: 5px;
//      font-weight: 600;
//    }
//
//    // Time labels
//    .label {
//      margin-left: 10px;
//      font-size: 9px;
//    }
//
//    // Tools and options box
//    .tools {
//      display: none;
//      float: right;
//      color: $danger;
//      // icons
//      > .fa, > .glyphicon, > .ion {
//        margin-right: 5px;
//        cursor: pointer;
//      }
//
//    }
//    &:hover .tools {
//      display: inline-block;
//    }
//
//    &.done {
//      color: #999;
//      .text {
//        text-decoration: line-through;
//        font-weight: 500;
//      }
//
//      .label {
//        background: $default !important;
//      }
//    }
//  }
//
//  // Color varaity
//  .danger {
//    border-left-color: $danger;
//  }
//  .warning {
//    border-left-color: $warning;
//  }
//  .info {
//    border-left-color: $info;
//  }
//  .success {
//    border-left-color: $success;
//  }
//  .primary {
//    border-left-color: $primary;
//  }
//
//  .handle {
//    display: inline-block;
//    cursor: move;
//    margin: 0 5px;
//  }
//
//}

// END TODO WIDGET

/* Chat widget (DEPRECATED - this will be removed in the next major release. Use Direct Chat instead)*/
//.chat {
//  padding: 5px 20px 5px 10px;
//
//  .item {
//    .clearfix();
//    margin-bottom: 10px;
//    // The image
//    > img {
//      width: 40px;
//      height: 40px;
//      border: 2px solid transparent;
//      .border-radius(50%);
//    }
//
//    > .online {
//      border: 2px solid $success;
//    }
//    > .offline {
//      border: 2px solid $danger;
//    }
//
//    // The message body
//    > .message {
//      margin-left: 55px;
//      margin-top: -40px;
//      > .name {
//        display: block;
//        font-weight: 600;
//      }
//    }
//
//    // The attachment
//    > .attachment {
//      .border-radius($attachment-border-radius);
//      background: #f4f4f4;
//      margin-left: 65px;
//      margin-right: 15px;
//      padding: 10px;
//      > h4 {
//        margin: 0 0 5px 0;
//        font-weight: 600;
//        font-size: 14px;
//      }
//      > p, > .filename {
//        font-weight: 600;
//        font-size: 13px;
//        font-style: italic;
//        margin: 0;
//
//      }
//      .clearfix();
//    }
//  }
//
//}
//
////END CHAT WIDGET
//
////Input in box
//.box-input {
//  max-width: 200px;
//}
//
////A fix for panels body text color when placed within
//// a modal
//.modal {
//  .panel-body {
//    color: #444;
//  }
//}


/////////////////////////


.t-pane {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .t-pane-header, .t-pane-footer {
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .t-pane-condition {
    .filter-item {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 10px;
    }
  }

  .t-pane-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    &.main-toolbar {
      //padding: 5px;
      //background-color: #F5F7FA;
      //border: solid 1px #EBEEF5;
      //border-bottom: 0;
    }
  }


  .t-pane-body {
    flex: auto;
  }

  .t-pane-footer {
  }

}


.form-sidebar {
  display: none;
  position: absolute;
  top: 0px;
  bottom: 0;
  right: 0;
  width: 80%;
  max-width: 950px;
  min-width: 360px;
  z-index: 3000;
  background-color: #fff;
  //border-top: 1px solid #e7eaec;
  border-left: 1px solid #e7eaec;

  .show {
    display: block;
  }

  .msg-footer {
    background: #FFFFFF;
    position: absolute;
    bottom: 0px;
    width: 100%;
    min-height: 33px;
    z-index: 9999;

    .msg-title {
      padding: 5px 10px;
      border-top: 2px solid #1C84C6;

      &.error {
        border-top: 2px solid #CC0000;
        background: #FF6666;
        color: #FFFFFF;

        .detail-btn {
          display: block;
        }
      }

      &.warning {
        border-top: 2px solid #DA8C10;
        background: #F39C12;
        color: #000000;

        .detail-btn {
          display: block;
        }
      }

      .detail-btn {
        display: none;
      }
    }

    #msg-detail {
      padding: 5px 10px;
    }
  }

}

.suspend {
  position: fixed;
  z-index: 1000;
  top: 0;
  bottom: 0;
  right: 0
}

.suspend dt {
  position: relative;
  right: calc(10px + 82%);
  width: 37px;
  height: 37px;
  cursor: pointer
}

.suspend dt.sidebar-open {
  position: fixed;
  left: auto;
  right: 0;
  width: 37px;
  height: 37px
}

.suspend dd {
  overflow: hidden;
  bottom: 36px
}

.selectColor {
  color: #000 !important
}

#right-sidebar {
  background-color: #fff;
  border-left: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  overflow: hidden;
  position: fixed;
  top: 60px;
  width: 260px !important;
  z-index: 1009;
  bottom: 0;
  right: -260px
}

#right-sidebar.sidebar-open {
  right: 0
}

#right-sidebar.sidebar-open.sidebar-top {
  top: 0;
  border-top: none
}


//
//.flex-x {
//  display: flex;
//  flex-direction: row;
//  justify-content: space-between;
//}
//
//.fbox {
//  display: flex;
//  flex-direction: column;
//
//  .fbox-header, .fbox-body, .fbox-footer {
//    flex: 0 0 auto;
//    justify-content: space-between;
//    flex-wrap: wrap;
//  }
//
//  &.active {
//  }
//
//}
//
//.fbox-x, .fbox-x-reverse, .fbox-y, .fbox-y-reverse {
//  display: flex;
//}
//
//.fbox-x {
//  flex-direction: row;
//}
//
//.fbox-y {
//  flex-direction: column;
//}
//
//.fbox-y-reverse {
//  flex-direction: column-reverse;
//}
//
//.fbox-x-reverse {
//  flex-direction: row-reverse;
//}
//
//.fbox-fill, .fbox-body {
//  flex: 1;
//}
//
//.fbox-footer.padding {
//  padding: 10px;
//}
//
//.full {
//  width: 100%;
//  height: 100%;
//}
//
//.ctoolbar {
//  margin-left: 0;
//
//  &.main-toolbar {
//    padding: 5px;
//    background-color: #F5F7FA;
//    border: solid 1px #EBEEF5;
//    border-bottom: 0;
//
//    //.btn {
//    //  border-right: 1px solid #A5BBD9;
//    //  //box-shadow: 1px 0px 0 #FFFFFF;
//    //  margin-left: 0px;
//    //}
//    //
//    //.btn-pull-right .btn {
//    //  border: none;
//    //  border-left: 1px solid #FFFFFF;
//    //  //box-shadow: -1px 0px 0 #A5BBD9;
//    //}
//
//  }
//
//  .side-toolbar {
//    padding-top: 3px;
//  }
//
//  .btn-pull-right {
//    float: right;
//  }
//
//  //.btn {
//  //  border-radius: 0;
//  //  border: none;
//  //  color: #003399;
//  //  padding: 2px 10px;
//  //  line-height: 21px;
//  //}
//  //.btn:hover {
//  //  color: #006699;
//  //}
//  //
//  //.btn.btn-default {
//  //  background-color: transparent;
//  //}
//  //
//  //.btn.btn-danger, .btn.btn-primary {
//  //  color: #FFFFFF;
//  //}
//
//  .dropdown-menu {
//    border-radius: 0;
//  }
//}
//
//.nav-tabs-top {
//  .nav-tabs {
//    background-color: #F5F5F5;
//    font-size: 14px;
//    border-bottom: 1px solid #A5BBD9;
//    padding: 2px;
//    margin-bottom: 1px;
//    box-shadow: 0px 1px 0 #FFF;
//  }
//
//  .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
//    color: #0066CC;
//    background: none;
//    cursor: default;
//    border: 0;
//    border-radius: 0;
//  }
//
//  .nav-tabs > li > a {
//    border: 0;
//    border-radius: 0;
//    color: #000;
//    display: block;
//    line-height: 26px;
//    padding: 0 10px;
//  }
//
//  .nav-tabs > li {
//    float: left;
//    margin: 0;
//  }
//
//  .nav-tabs > li:not(:last-child) {
//    border-right: 1px solid #819BB6;
//    box-shadow: 1px 0px 0 #FFFFFF;
//  }
//}
//
//form.condition {
//  position: relative;
//  height: auto;
//  background-color: #F1F1F1;
//  box-sizing: border-box;
//  padding: 3px;
//
//  .row {
//    margin: 0;
//    padding: 0;
//
//    .col {
//      margin: 0px;
//      padding: 3px;
//    }
//  }
//}
//
//.col-xs-3:not(:first-child) {
//  padding-left: 0px;
//}
//
//.right-sidebar {
//  background-color: #fff;
//  //border-top: 1px solid #e7eaec;
//  border-left: 1px solid #e7eaec;
//  position: fixed; // fixed;
//  z-index: 1000;
//  width: 80%;
//  max-width: 950px;
//  top: 0px;
//  bottom: 0;
//  right: 0;
//  display: none;
//
//  .msg-footer {
//    background: #FFFFFF;
//    position: absolute;
//    bottom: 0px;
//    width: 100%;
//    min-height: 33px;
//    z-index: 9999;
//
//    .msg-title {
//      padding: 5px 10px;
//      border-top: 2px solid #1C84C6;
//
//      &.error {
//        border-top: 2px solid #CC0000;
//        background: #FF6666;
//        color: #FFFFFF;
//
//        .detail-btn {
//          display: block;
//        }
//      }
//
//      &.warning {
//        border-top: 2px solid #DA8C10;
//        background: #F39C12;
//        color: #000000;
//
//        .detail-btn {
//          display: block;
//        }
//      }
//
//      .detail-btn {
//        display: none;
//      }
//    }
//
//    #msg-detail {
//      padding: 5px 10px;
//    }
//  }
//}
//
//.right-sidebar.sidebar-open {
//  display: block;
//}
//
//.suspend {
//  position: fixed;
//  z-index: 1000;
//  top: 0;
//  bottom: 0;
//  right: 0
//}
//
//.suspend dt {
//  position: relative;
//  right: calc(10px + 82%);
//  width: 37px;
//  height: 37px;
//  cursor: pointer
//}
//
//.suspend dt.sidebar-open {
//  position: fixed;
//  left: auto;
//  right: 0;
//  width: 37px;
//  height: 37px
//}
//
//.suspend dd {
//  overflow: hidden;
//  bottom: 36px
//}
//
//.selectColor {
//  color: #000 !important
//}
//
//#right-sidebar {
//  background-color: #fff;
//  border-left: 1px solid #e7eaec;
//  border-top: 1px solid #e7eaec;
//  overflow: hidden;
//  position: fixed;
//  top: 60px;
//  width: 260px !important;
//  z-index: 1009;
//  bottom: 0;
//  right: -260px
//}
//
//#right-sidebar.sidebar-open {
//  right: 0
//}
//
//#right-sidebar.sidebar-open.sidebar-top {
//  top: 0;
//  border-top: none
//}
